let btn = document.querySelector('.button')
let app = document.getElementById('app')
let preset_themes = [
  {
    value: "primary",
    text: "主题",
  },
  {
    value: "error",
    text: "错误",
  },
  {
    value: "success",
    text: "成功",
  },
  {
    value: "default",
    text: "默认",
  },
]


btn.addEventListener('click', function () {
  let notice_list = document.querySelectorAll('.notice')
  let notice = document.createElement('div')
  notice.classList.add('notice')

  // 通知盒子的高度
  let notice_height = 50
  // 通知盒子的bottom默认值
  let default_bottom = 100
  // 每个通知盒子的间距
  let box_spacing = 10
  if (notice_list.length) {
    notice.style.transform = `translateY(-${((notice_height + box_spacing) * notice_list.length + default_bottom)}px)`
  } else {
    notice.style.transform = `translateY(-${default_bottom}px)`
  }
  let theme = randomTheme()
  notice.innerText = theme.text + Math.floor(Math.random() * 101)
  notice.classList.add(theme.value)

  app.appendChild(notice)

  setTimeout(()=>{
    notice.remove()
  },3000)
})


function createNotice(){
  let notice_list = document.querySelectorAll('.notice')
  let notice = document.createElement('div')
  notice.classList.add('notice')

  // 通知盒子的高度
  let notice_height = 50
  // 通知盒子的bottom默认值
  let default_bottom = 100
  // 每个通知盒子的间距
  let box_spacing = 10
  if (notice_list.length) {
    notice.style.transform = `translateY(-${((notice_height + box_spacing) * notice_list.length + default_bottom)}px)`
  } else {
    notice.style.transform = `translateY(-${default_bottom}px)`
  }
  let theme = randomTheme()
  notice.innerText = theme.text + Math.floor(Math.random() * 101)
  notice.classList.add(theme.value)

  app.appendChild(notice)

  setTimeout(()=>{
    notice.remove()
  }, 3000)
}





function randomTheme() {
  return preset_themes[Math.floor(Math.random() * preset_themes.length)]
}